import React, { useState } from 'react'
import { ResultPage, Card, Tabs, Input,Button } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import styles from './css/home.module.css'
import { useNavigate } from 'react-router-dom'

const Home = () => {
    const nav= useNavigate()
    const [start, setStart] = useState('')
    const [end, setEnd] = useState('')

    const getHome = () => {
        const temp = start
        setStart(end)
        setEnd(temp)
    }

   const getList=()=>{
    nav(`/list?start=${start}&end=${end}`)
   }

    return (
        <div>
            <ResultPage
                status=''
                title=''
                description=''
            >
                <ResultPage.Card style={{ padding: 8 }}>
                    <Tabs>
                        <Tabs.Tab title='单程' key='fruits'>
                            <div className={styles.box}>
                                <Input
                                    placeholder='请输入出发地'
                                    value={start}
                                    onChange={val => {
                                        setStart(val)
                                    }}
                                />
                                <LoopOutline fontSize={22} onClick={() => getHome()} />
                                <Input
                                    placeholder='请输入目的地'
                                    value={end}
                                    onChange={val => {
                                        setEnd(val)
                                    }}
                                />
                            </div>
                             <Button block color='warning' shape='rounded' onClick={()=> getList()}>
                                    搜索机票
                                </Button>
                        </Tabs.Tab>
                        <Tabs.Tab title='往返' key='vegetables'>
                            往返
                        </Tabs.Tab>
                        <Tabs.Tab title='特价' key='animals'>
                            特价
                        </Tabs.Tab>
                    </Tabs>
                </ResultPage.Card>
            </ResultPage>
        </div>
    )
}

export default Home
